<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-focus />
      <p v-upper>dsdaSSDSFDfdsfs</p>
    </div>

    <div id="app2">
      <input type="text" v-focus />
      <p v-upper>sadad</p>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    /*
        自定义指令：
            * 局部指令注册:只有注册了该指令的vue实例才能使用
                directives : {
                    '指令名' : {
                        钩子() {

                        }
                    }
                }
            * 全局指令注册:只要是vue的实例都可以调用
                Vue.directive('指令名',{钩子(){}})
      */

    //全局注册指令
    //v-upper 能把字母变成大写
    Vue.directive("upper", {
      inserted(el) {
        console.log(el);
        el.innerText = el.innerText.toUpperCase();
        el.style.color = "red";
      },
    });

    new Vue({
      el: "#app",
      data: {},

      //局部注册指令  v-foucs
      directives: {
        focus: {
          //指令不需要加 v-  但是使用的时候记得加 v-
          inserted(el, binding) {
            // el是当前指令作用的那个Dom元素，
            // binding用于获取使用了当前指令的绑定值(value)、表达式(expression)、指令名(name)等
            // console.log(el, binding);
            el.focus(); //聚焦的兼容处理
          },
        },
      },
    });

    //第二个vue实例
    new Vue({
      el: "#app2",
    });
  </script>
</html>
